<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>店铺装修</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="home-b2c.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">店铺装修</h1>
                <button onclick="openStorePreview()" class="text-white hover:opacity-80">
                    <i class="fas fa-eye text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Store Preview Card -->
        <div class="px-4 py-3 bg-gradient-to-r from-purple-600 to-indigo-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3">
                <div class="flex items-center justify-between text-white mb-2">
                    <p class="text-sm font-medium">当前模板: 简约风格</p>
                    <button onclick="openStorePreview()" class="bg-white/20 text-xs px-2 py-1 rounded-full hover:bg-white/30 transition-colors">预览</button>
                </div>
                <div class="bg-white rounded-lg p-3">
                    <img src="https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=300&h=150&fit=crop" 
                         alt="店铺预览" class="w-full h-32 object-cover rounded-lg">
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-250px)] overflow-y-auto pb-24">
            <!-- Template Selection -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-purple-600 mr-2 rounded-full"></span>
                        选择模板
                    </span>
                    <span onclick="viewMoreTemplates()" class="text-xs text-purple-600 cursor-pointer hover:text-purple-700">更多模板 <i class="fas fa-chevron-right text-xs"></i></span>
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-white rounded-lg border-2 border-purple-500 overflow-hidden cursor-pointer" onclick="selectTemplate('simple')">
                        <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=200&h=120&fit=crop" 
                             alt="模板1" class="w-full h-24 object-cover">
                        <div class="p-2">
                            <p class="text-xs font-medium">简约风格</p>
                            <p class="text-xs text-gray-500">当前使用</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer hover:border-purple-300" onclick="selectTemplate('fashion')">
                        <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=200&h=120&fit=crop" 
                             alt="模板2" class="w-full h-24 object-cover">
                        <div class="p-2">
                            <p class="text-xs font-medium">时尚潮流</p>
                            <p class="text-xs text-purple-600">免费</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer hover:border-purple-300" onclick="selectTemplate('business')">
                        <img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?w=200&h=120&fit=crop" 
                             alt="模板3" class="w-full h-24 object-cover">
                        <div class="p-2">
                            <p class="text-xs font-medium">商务专业</p>
                            <p class="text-xs text-orange-600">VIP专享</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?w=200&h=120&fit=crop" 
                             alt="模板4" class="w-full h-24 object-cover">
                        <div class="p-2">
                            <p class="text-xs font-medium">节日特色</p>
                            <p class="text-xs text-green-600">限时免费</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Page Components -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-purple-600 mr-2 rounded-full"></span>
                    页面组件
                </h3>
                <div class="space-y-3">
                    <!-- Banner Settings -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-images text-purple-600 text-lg mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium">轮播图</p>
                                    <p class="text-xs text-gray-500">已添加3张图片</p>
                                </div>
                            </div>
                            <button onclick="editBanner()" class="text-blue-600 text-sm hover:text-blue-700 transition-colors">编辑</button>
                        </div>
                    </div>

                    <!-- Navigation Menu -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-th text-indigo-600 text-lg mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium">导航菜单</p>
                                    <p class="text-xs text-gray-500">8个快捷入口</p>
                                </div>
                            </div>
                            <button onclick="editNavigation()" class="text-blue-600 text-sm hover:text-blue-700 transition-colors">编辑</button>
                        </div>
                    </div>

                    <!-- Product Display -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-box text-green-600 text-lg mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium">商品展示</p>
                                    <p class="text-xs text-gray-500">精选商品橱窗</p>
                                </div>
                            </div>
                            <button onclick="editProductDisplay()" class="text-blue-600 text-sm hover:text-blue-700 transition-colors">编辑</button>
                        </div>
                    </div>

                    <!-- Coupon Area -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-ticket-alt text-orange-600 text-lg mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium">优惠券区</p>
                                    <p class="text-xs text-gray-500">新人专享优惠</p>
                                </div>
                            </div>
                            <button onclick="editCouponArea()" class="text-blue-600 text-sm hover:text-blue-700 transition-colors">编辑</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Custom Modules -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-purple-600 mr-2 rounded-full"></span>
                        自定义模块
                    </span>
                    <button onclick="addCustomModule()" class="text-purple-600 text-xs hover:text-purple-700 cursor-pointer">
                        <i class="fas fa-plus mr-1"></i>添加模块
                    </button>
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-3 border border-blue-200 text-center cursor-pointer hover:border-blue-400 transition-all" onclick="toggleModule('video')">
                        <i class="fas fa-video text-2xl text-blue-600 mb-2"></i>
                        <p class="text-xs font-medium">视频展示</p>
                        <div class="mt-2">
                            <span class="module-status bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已启用</span>
                        </div>
                    </div>
                    <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-3 border border-green-200 text-center cursor-pointer hover:border-green-400 transition-all" onclick="toggleModule('reviews')">
                        <i class="fas fa-comment-dots text-2xl text-green-600 mb-2"></i>
                        <p class="text-xs font-medium">买家秀</p>
                        <div class="mt-2">
                            <span class="module-status bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">未启用</span>
                        </div>
                    </div>
                    <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-3 border border-purple-200 text-center cursor-pointer hover:border-purple-400 transition-all" onclick="toggleModule('announcement')">
                        <i class="fas fa-bullhorn text-2xl text-purple-600 mb-2"></i>
                        <p class="text-xs font-medium">公告栏</p>
                        <div class="mt-2">
                            <span class="module-status bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已启用</span>
                        </div>
                    </div>
                    <div class="bg-gradient-to-br from-orange-50 to-red-50 rounded-xl p-3 border border-orange-200 text-center cursor-pointer hover:border-orange-400 transition-all" onclick="toggleModule('hotlist')">
                        <i class="fas fa-fire text-2xl text-orange-600 mb-2"></i>
                        <p class="text-xs font-medium">热销榜单</p>
                        <div class="mt-2">
                            <span class="module-status bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">未启用</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Store Info -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-purple-600 mr-2 rounded-full"></span>
                    店铺信息
                </h3>
                <div class="bg-white rounded-lg border border-gray-200 p-4">
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">店铺名称</span>
                            <span class="text-sm font-medium">潮流数码旗舰店</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">店铺LOGO</span>
                            <img src="https://images.unsplash.com/photo-1707061229170-fc232a07a55f?q=80&w=881&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Logo" class="w-10 h-10 rounded-lg">
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">店铺简介</span>
                            <button class="text-blue-600 text-sm">编辑</button>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">客服设置</span>
                            <button class="text-blue-600 text-sm">配置</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="px-4 pb-4">
                <button class="w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-medium py-3 rounded-xl mb-2 shadow-lg hover:shadow-xl transition-all duration-200">
                    <i class="fas fa-save mr-2"></i>保存并发布
                </button>
                <button onclick="openStorePreview()" class="w-full bg-gray-100 text-gray-700 font-medium py-3 rounded-xl hover:bg-gray-200 transition-colors">
                    <i class="fas fa-eye mr-2"></i>预览效果
                </button>
            </div>
        </div>
    </div>

    <script>
        // Store decoration functions
        let currentTemplate = 'simple';
        let moduleStates = {
            video: true,
            reviews: false,
            announcement: true,
            hotlist: false
        };

        // Template functions
        function viewMoreTemplates() {
            window.location.href = 'template-market.html';
        }

        function selectTemplate(templateId) {
            if (templateId === currentTemplate) {
                showToast('当前已在使用此模板');
                return;
            }

            const templateNames = {
                'simple': '简约风格',
                'fashion': '时尚潮流',
                'business': '商务专业'
            };

            if (confirm(`确认切换到"${templateNames[templateId]}"模板？\n\n切换后店铺外观将发生改变，建议先预览效果。`)) {
                showToast(`正在切换到${templateNames[templateId]}模板...`);
                
                // Update UI
                updateTemplateSelection(templateId);
                currentTemplate = templateId;
                
                setTimeout(() => {
                    showToast('模板切换成功！');
                }, 1500);
            }
        }

        function updateTemplateSelection(selectedTemplate) {
            // Remove current selection styling
            document.querySelectorAll('[onclick*="selectTemplate"]').forEach(template => {
                template.classList.remove('border-purple-500', 'border-2');
                template.classList.add('border-gray-200');
                const statusText = template.querySelector('p:last-child');
                if (statusText.textContent === '当前使用') {
                    statusText.textContent = '免费';
                    statusText.className = 'text-xs text-purple-600';
                }
            });

            // Add selection styling to new template
            const newTemplate = document.querySelector(`[onclick*="${selectedTemplate}"]`);
            if (newTemplate) {
                newTemplate.classList.remove('border-gray-200');
                newTemplate.classList.add('border-purple-500', 'border-2');
                const statusText = newTemplate.querySelector('p:last-child');
                statusText.textContent = '当前使用';
                statusText.className = 'text-xs text-gray-500';
            }
        }

        // Module functions
        function toggleModule(moduleId) {
            const moduleNames = {
                'video': '视频展示',
                'reviews': '买家秀',
                'announcement': '公告栏',
                'hotlist': '热销榜单'
            };

            const currentState = moduleStates[moduleId];
            const newState = !currentState;
            const action = newState ? '启用' : '禁用';

            if (confirm(`确认${action}"${moduleNames[moduleId]}"模块？\n\n${action}后将影响店铺页面显示效果。`)) {
                moduleStates[moduleId] = newState;
                updateModuleStatus(moduleId, newState);
                showToast(`${moduleNames[moduleId]}模块已${action}`);
            }
        }

        function updateModuleStatus(moduleId, isEnabled) {
            const moduleElement = document.querySelector(`[onclick*="${moduleId}"]`);
            if (moduleElement) {
                const statusElement = moduleElement.querySelector('.module-status');
                if (isEnabled) {
                    statusElement.className = 'module-status bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full';
                    statusElement.textContent = '已启用';
                } else {
                    statusElement.className = 'module-status bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full';
                    statusElement.textContent = '未启用';
                }
            }
        }

        function addCustomModule() {
            window.location.href = 'module-selector.html';
        }

        // Page component edit functions
        function editBanner() {
            window.location.href = 'banner-edit.html';
        }

        function editNavigation() {
            window.location.href = 'navigation-edit.html';
        }

        function editProductDisplay() {
            window.location.href = 'product-display-edit.html';
        }

        function editCouponArea() {
            window.location.href = 'coupon-area-edit.html';
        }

        // Store preview function
        function openStorePreview() {
            window.location.href = 'store-preview.html';
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('店铺装修页面已加载');
        });
    </script>
</body>
</html>